<!-- stories/templates/stories/leaderboard.html -->
{% extends 'stories/base.html' %}
{% load static %}

{% block title %}排行榜 - AI故事生成网站{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
        <h1>故事排行榜</h1>
        <p>发现最受欢迎的故事</p>
    </div>

    <!-- 排行榜标签页 -->
    <div class="leaderboard-tabs">
        <ul class="tab-list">
            <li class="tab-item active" data-tab="composite">综合排名</li>
            <li class="tab-item" data-tab="comments">评论数排行</li>
            <li class="tab-item" data-tab="rating">评分排行</li>
            <li class="tab-item" data-tab="views">浏览量排行</li>
        </ul>
    </div>

    <!-- 综合排名 -->
    <div class="leaderboard-section" data-tab="composite" style="display: block;">
        <h2>综合排名</h2>
        <div class="leaderboard-list">
            {% for story in top_by_composite %}
                <div class="leaderboard-item">
                    <div class="rank">{{ forloop.counter }}</div>
                    <div class="story-info">
                        <h3><a href="{% url 'stories:story_detail' story.id %}">{{ story.title }}</a></h3>
                        <div class="story-meta">
                            <span class="author">作者: {{ story.author.username }}</span>
                            <span class="category">分类: {{ story.category.name }}</span>
                        </div>
                        <div class="story-stats">
                            <span class="comments">💬 {{ story.comment_count }} 评论</span>
                            <span class="rating">
                                {% for i in "12345" %}
                                    {% if forloop.counter <= story.average_rating|floatformat:"0"|add:"0" %}
                                        ★
                                    {% else %}
                                        ☆
                                    {% endif %}
                                {% endfor %}
                                ({{ story.rating_count }})
                            </span>
                            <span class="views">👁️ {{ story.view_count }} 浏览</span>
                        </div>
                    </div>
                </div>
            {% empty %}
                <div class="no-stories">暂无数据</div>
            {% endfor %}
        </div>
    </div>

    <!-- 评论数排行 -->
    <div class="leaderboard-section" data-tab="comments" style="display: none;">
        <h2>评论数排行</h2>
        <div class="leaderboard-list">
            {% for story in top_by_comments %}
                <div class="leaderboard-item">
                    <div class="rank">{{ forloop.counter }}</div>
                    <div class="story-info">
                        <h3><a href="{% url 'stories:story_detail' story.id %}">{{ story.title }}</a></h3>
                        <div class="story-meta">
                            <span class="author">作者: {{ story.author.username }}</span>
                            <span class="category">分类: {{ story.category.name }}</span>
                        </div>
                        <div class="story-stats">
                            <span class="comments">💬 {{ story.comment_count }} 评论</span>
                            <span class="rating">
                                {% for i in "12345" %}
                                    {% if forloop.counter <= story.average_rating|floatformat:"0"|add:"0" %}
                                        ★
                                    {% else %}
                                        ☆
                                    {% endif %}
                                {% endfor %}
                                ({{ story.rating_count }})
                            </span>
                            <span class="views">👁️ {{ story.view_count }} 浏览</span>
                        </div>
                    </div>
                </div>
            {% empty %}
                <div class="no-stories">暂无数据</div>
            {% endfor %}
        </div>
    </div>

    <!-- 评分排行 -->
    <div class="leaderboard-section" data-tab="rating" style="display: none;">
        <h2>评分排行</h2>
        <div class="leaderboard-list">
            {% for story in top_by_rating %}
                <div class="leaderboard-item">
                    <div class="rank">{{ forloop.counter }}</div>
                    <div class="story-info">
                        <h3><a href="{% url 'stories:story_detail' story.id %}">{{ story.title }}</a></h3>
                        <div class="story-meta">
                            <span class="author">作者: {{ story.author.username }}</span>
                            <span class="category">分类: {{ story.category.name }}</span>
                        </div>
                        <div class="story-stats">
                            <span class="comments">💬 {{ story.comment_count }} 评论</span>
                            <span class="rating">
                                {% for i in "12345" %}
                                    {% if forloop.counter <= story.average_rating|floatformat:"0"|add:"0" %}
                                        ★
                                    {% else %}
                                        ☆
                                    {% endif %}
                                {% endfor %}
                                ({{ story.rating_count }})
                            </span>
                            <span class="views">👁️ {{ story.view_count }} 浏览</span>
                        </div>
                    </div>
                </div>
            {% empty %}
                <div class="no-stories">暂无数据</div>
            {% endfor %}
        </div>
    </div>

    <!-- 浏览量排行 -->
    <div class="leaderboard-section" data-tab="views" style="display: none;">
        <h2>浏览量排行</h2>
        <div class="leaderboard-list">
            {% for story in top_by_views %}
                <div class="leaderboard-item">
                    <div class="rank">{{ forloop.counter }}</div>
                    <div class="story-info">
                        <h3><a href="{% url 'stories:story_detail' story.id %}">{{ story.title }}</a></h3>
                        <div class="story-meta">
                            <span class="author">作者: {{ story.author.username }}</span>
                            <span class="category">分类: {{ story.category.name }}</span>
                        </div>
                        <div class="story-stats">
                            <span class="comments">💬 {{ story.comment_count }} 评论</span>
                            <span class="rating">
                                {% for i in "12345" %}
                                    {% if forloop.counter <= story.average_rating|floatformat:"0"|add:"0" %}
                                        ★
                                    {% else %}
                                        ☆
                                    {% endif %}
                                {% endfor %}
                                ({{ story.rating_count }})
                            </span>
                            <span class="views">👁️ {{ story.view_count }} 浏览</span>
                        </div>
                    </div>
                </div>
            {% empty %}
                <div class="no-stories">暂无数据</div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 标签页切换功能
    $('.tab-item').click(function() {
        // 移除所有active类
        $('.tab-item').removeClass('active');
        $('.leaderboard-section').hide();

        // 添加当前active类
        $(this).addClass('active');

        // 显示对应标签页
        var tab = $(this).data('tab');
        $('.leaderboard-section[data-tab="' + tab + '"]').show();
    });
});
</script>
{% endblock %}